<!DOCTYPE html>
<html>
<head>
    <title>生成整站模板</title>
    <include file='public/head'>
        <style>
            table th, table td{text-align: center;}
            .glyphicon-remove-btn{
            	color:red;
            	cursor: pointer;
            }
            .module-list label{
            	padding: 8px 10px;
            }
            .select-main-panel{
            	position: relative;
            }
            .display-div{
            	position: absolute;
            	top: 10px;
            	right: 10px;
            }
            .select-main-panel:after{
                content: '';
                height: 0px;
                display: block;
                clear: both;
            }
            .flexible-panel{
            	/*display: none;*/
            }
            .display-btn{
            	cursor: pointer;
				font-size:18px;
            }
            .display-btn:hover{
                color:orange;
            }
            .shadow{
                width:100%;
                height:100%;
                position:absolute;
                left:0;
                top:0;
                z-index:998;
                background-color:#000;
                opacity:0.6;
                display:none;
            }
        </style>
</head>
<body>
    <div class="wrap js-check-wrap">
        <ul class="nav nav-tabs">
           <?php $currentTab  =  8 ; ?>
           <include file='public/nav'>
        </ul>
        <div class="well margin-top-20">
        	<h4 style="height: 50px;line-height: 50px;border-bottom: 1px solid white;"><span class="glyphicon glyphicon-wrench"></span> 配置清单</h4>
        	<div class="" style="padding-left: 10px;">
                <h5 id="web-name">网站名称: &nbsp;&nbsp;<input class="form-control"  style=" display: inline-block; width: 500px; font-size: 14px; font-weight: 800 ;" type="text" name="webName" value ="" placeholder="请填写网站名称!"></h5>
                <h5 id="web-remarks">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注: &nbsp;&nbsp;<input class="form-control"  style=" display: inline-block; width: 500px; font-size: 14px; font-weight: 800 ;" type="text" name="remarks" value ="" placeholder="请填写备注信息"></h5>
        		<h5 id="node-framework">已选框架: &nbsp;&nbsp;<label >未选择</label></h5>
        		<h5>已选模板:</h5>
        		<div class="module-list" id="node-template" style="padding-left:10px;">
        			<label>未选择模板</label>
        		</div>
        	</div>
            <div style="text-align: right;border-top: 1px solid white;padding: 5px 30px 0px 0px;">
                <button class="btn btn-success" type="button" onclick="createSiteTemplate();"><span class="glyphicon glyphicon-hand-right"></span> 生成模板</button>
            </div>
        </div>

        <div class="well margin-top-20 select-main-panel">
            <div class="display-div"><span class="glyphicon glyphicon-menu-up display-btn" title="收起"></span></div>
            <h4 style="height: 50px;line-height: 50px;border-bottom: 1px solid white;"><span class="glyphicon glyphicon-home"></span>前端框架&nbsp;&nbsp;<span id="framework-title" style=""></span></h4>
            <div class="flexible-panel module-list" id="select-framework">
                <!-- 框架列表 -->
                <volist name="frameworkList" id="vo">
                    <label><input type="radio" name="framework" id="framework-{$vo.id}" value="{$vo.id}" data-tag="{$vo.name}">&nbsp;&nbsp;{$vo.name}</label>
                </volist>
                <empty name="frameworkList">
                    暂无记录~
                </empty>
            </div>
        </div>
        
        <div class="well margin-top-20 select-main-panel">
            <div class="display-div"><span class="glyphicon glyphicon-menu-up display-btn" title="收起"></span></div>
            <h4 style="height: 50px;line-height: 50px;border-bottom: 1px solid white;"><span class="glyphicon glyphicon-th"></span>模块列表&nbsp;&nbsp;</h4>
            <div class="flexible-panel module-list" id="select-module">
                <!-- 模块列表 -->
                <volist name="moduleList" id="vo">
                    <label><input type="checkbox" name="{$vo.name}" value="{$vo.title}">&nbsp;&nbsp;{$vo.title}</label>
                </volist>
                <empty name ="moduleList" >
                    暂无记录~
                </empty>
            </div>
        </div>

        <div id="module-template-list" >
        </div>
       
        <!-- <div class="well margin-top-20 select-main-panel">
            <div class="display-div"><span class="glyphicon glyphicon-menu-up display-btn" title="收起"></span></div>
            <h4 style="height: 50px;line-height: 50px;border-bottom: 1px solid white;">商品模块&nbsp;&nbsp;<span style="">商品模块 1.0 模板1</span></h4>
            <div class="flexible-panel">

            </div>
        </div> -->
    </div>

<!--遮罩层-->
<div class="shadow" id="shadow-status-panel">
    <div class="show-status" style="width:50%;height:300px; margin: 200px auto 0px auto; background-color: white;z-index: 1000;padding: 20px;overflow-y: scroll;">
        <p id="loading-show">|</p>
    </div>
</div>

<include file='public/scripts'>
<script src="__STATIC__/js/layer/layer.js"></script>
<script src="__STATIC__/js/custom/custom.js"></script>
<script>

    //选择的模板列表
    var selectTemplateList = [];
    //选择框架
    var selectFramework = null ;

    //选择框架
    $('#select-framework input[type=radio]').each(function(){
        $(this).change(function(){
            let checked = $(this).prop( 'checked' );
            if( true == checked ){
                let value = $( this ).val();
                let radioId = $(this).attr(  'id' );
                let title = $(this).data('tag');
                let fw = title + '<span class="glyphicon glyphicon-remove glyphicon-remove-btn remove-framework-btn" data-tag="'+radioId+'" title="移除"></span>';
                $('#node-framework label').html(fw);
                $('#framework-title').text(title);
                selectFramework = value;
            }
        });
    });
    //移除选择框架
    $(document).on( 'click' , '.remove-framework-btn' , function(){
        let radioId = $(this).data( 'tag' );
        $(document).find( 'input[name=framework]' ).attr( 'checked' , false );
        $('#node-framework label').html('未选择');
        $('#framework-title').text('');
        selectFramework = null
    } );

    //开关
    $(document).on('click','.display-btn',function(){
        if( $(this).hasClass( 'glyphicon-menu-up' ) ){
            $(this).removeClass( 'glyphicon-menu-up' );
            $(this).addClass( 'glyphicon-menu-hamburger' );
            $(this).attr( 'title' , '展开' );
            $(this).parent().parent().find('.flexible-panel').hide();
        }else if( $(this).hasClass( 'glyphicon-menu-hamburger' ) ){
            $(this).removeClass( 'glyphicon-menu-hamburger' );
            $(this).addClass( 'glyphicon-menu-up' );
            $(this).attr( 'title' , '收起' );
            $(this).parent().parent().find('.flexible-panel').show();
        }
    });
    //选择模块
    $( '#select-module' ).find('input[type=checkbox]').each(function(){
        $(this).change(function(){
            let moduleSymbol = $(this).attr( 'name' );
            let moduleName = $(this).val();
            let checked = $(this).is(':checked');
            let domId = '#module-template-item-'+moduleSymbol;
            if( false == checked ) {
                //取消选中的时候,里面预选的项全部清除
                clearCheckedModuleTemplateItem( domId );
                //删除取消选中记录
                //取消模块选择的时候删除该已选的模块数据
                deleteSelectTemplate( moduleSymbol );
            }   else{
                //选中模块加载数据去
                selectedModuleToGetData( moduleSymbol , moduleName );
            }
        //checkbox change事件结束
        });
    //选择模块方法结束
    });


    //取消模块选中的时候去除里面所有选中的模板
    var clearCheckedModuleTemplateItem = function ( domId ){
        //请求多费劲啊,还是隐藏,万一要用呢
        $(document).find( domId +' input[type=radio]' ).each(function(){
            $(this).prop( 'checked' , false );
        });
        $(document).find( domId ).hide();
    }

    //选中模块获取数据 并且显示到dom
    var selectedModuleToGetData = function( moduleSymbol , moduleName ) {
        //检查是否已经加载过了
        let node = $(document).find( '#module-template-item-'+moduleSymbol );         
        if( node.length >0 ){
            node.show();
            return false;
        } 
        //节点不存在,去后台请求数据
        //获取模块模板信息
        let url = '{:cmf_plugin_url("Appmarket://createSiteTemplate/getTemplateList")}';
        $.post( url , { moduleSymbol : moduleSymbol } ,  function(data){
            data = JSON.parse(data);
            let icon = ( data.code == 200 )? 1: 5;
            var list = data.data;
            if( icon == 1 ){
                var div = '';
                    div += '<div class="well margin-top-20 select-main-panel" id="module-template-item-'+moduleSymbol+'">';
                        div += '<div class="display-div"><span class="glyphicon glyphicon-menu-up display-btn" title="收起"></span></div>';
                        div += '<h4 style="height: 50px;line-height: 50px;border-bottom: 1px solid white;"><span class="glyphicon glyphicon-option-vertical"></span>'+moduleName+'&nbsp;&nbsp;<span class="show-select-temp-'+moduleSymbol+'" style="font-size:14px;color:orange;">未选择</span></h4>';
                        div += '<div class="flexible-panel module-list" id="select-template">';
                            var version = '';
                            for ( var i=0;i<list.length;i++ ){
                                var item = list [i];
                                if( ( version == '' ) || (version != item.version) ){
                                    div += '<h5>'+item.version+'</h5>';
                                }
                                version = item.version;
                                let title = moduleName+ ' ' + item.version + ' ' + item.template_name  ;
                                div += '<label><input type="radio" class="template-radio" name="template-'+item.name+'" id="template-'+item.name+item.id+'" value="" data-title="'+title+'" data-symbol="'+item.name+'" data-moduleid="'+item.module_store_id+'" data-templateid="'+item.id+'"  >&nbsp;&nbsp;'+item.template_name+'</label>';
                            }
                        div += '</div>';
                    div += '</div>';
                $( '#module-template-list' ).append( div );
            }else{
                layer.msg( data.message , { icon : icon } );
            }
            
        //请求结束
        } );
    //方法结束
    }
    
    //选择模板
    $(document).on( 'change' , '.template-radio' , function(){
        var moduleSymbol = $(this).data('symbol');
        var moduleid = $(this).data('moduleid');
        var templateid = $(this).data('templateid');
        var title = $(this).data('title');
        var item = [] ;
        item [ 'symbol' ] = moduleSymbol;
        item [ 'moduleid' ] = moduleid;
        item [ 'title' ] = title ; 
        item ['templateid'] = templateid;
        item ['nodeid'] = $(this).attr('id'); 
        selectTemplateList [ moduleSymbol ] = item ;
        $('.show-select-temp-'+moduleSymbol ).html( '已选模板:'+title );
        updateSelectTemplate();
    } );

    //移除选择模板
    $(document).on( 'click' , '.glyphicon-remove-template-btn' , function(){
        let id = $(this).data('tag');
        let moduleSymbol = $(this).data('symbol');
        $(document).find('#'+id).attr( 'checked' , false );
        $(this).parent().remove();
        deleteSelectTemplate(moduleSymbol);
    } );

    //更新选择模板
    var updateSelectTemplate = function(){
        var select = '';
        for( key in selectTemplateList ){
            var item = selectTemplateList [ key ] ;
            select += '<label>'+item['title']+'<span class="glyphicon glyphicon-remove glyphicon-remove-btn glyphicon-remove-template-btn" data-symbol="'+item['symbol']+'" data-tag="'+item['nodeid']+'"></span></label>';
        }
        $('#node-template').html('');
        if( select == '' ){
             $('#node-template').html( '<label>未选择模板</label>' );
             return false;
        }
        $('#node-template').html(select);
    }

    //取消模块选择的时候删除该已选的模块数据
    var deleteSelectTemplate = function( moduleSymbol ){
        delete selectTemplateList [ moduleSymbol ] ;
        $('.show-select-temp-'+moduleSymbol ).html( '未选择' );
        updateSelectTemplate();
    }

    //提交数据
    var createSiteTemplate = function(){

        let webName = $( '#web-name input[name=webName]' ).val();
        if( $.trim( webName ).length == 0  ){
            layer.msg( '请填写网站名称!' , { icon : 5 } );
            return false;
        }
        let remarks = $( '#web-remarks input[name=remarks]' ).val();
        if( $.trim( remarks ).length == 0 ){
            layer.msg( '请填写备注信息!', {  icon : 5 } ); 
            return false;
        }

        if( selectFramework == null ){
            layer.msg( '请选择前端框架!' , { icon : 5 });
            return false;
        }
        var count = 0 ;
        var postTemplateList = [];
        for( key in selectTemplateList ){
            count ++ ;
            var obj = {};
            var item = selectTemplateList [ key ] ;
            obj [ 'symbol' ] = item [ 'symbol' ]; 
            obj [ 'moduleid' ] = item [ 'moduleid' ] ;
            obj [ 'templateid' ] = item [ 'templateid' ] ; 
            postTemplateList.push( obj );
        }
        if( count == 0 ){
            layer.msg( '请选择前端模板!' , { icon : 5 } );
            return false;
        }
        //
		$('.shadow').css('height',$('body').height());
        $('.shadow').show();
        loadshow();
        //提交数据
        let url = "{:cmf_plugin_url('Appmarket://CreateSiteTemplate/createSiteTemplate')}"; 
        $.post( url ,{data : { selectFramework:selectFramework , selectTemplateList :postTemplateList , webName : webName ,remarks:remarks} } ,function(data){
            data = JSON.parse(data);
      
            let icon = ( data.code == 200 ) ? 1 : 5;
            //layer.msg( data.message , { icon : icon } );
            showStatus( data.message , ( data.code == 200 ) );
            if( icon == 1 ){
                //更新
                setTimeout( function(){
                    margeFile( data.data );
                } , 1200 );
            }else{

            }
        } );
    }

    //执行
    var margeFile = function( recordsId){
        let url = "{:cmf_plugin_url('Appmarket://CreateSiteTemplate/mergeFile')}";
        $.ajax({
            url:url,
            type:'POST',
            data:{ recordsId : recordsId },
            dataType:'json',
            beforeSend:function(){
            },
            success:function(data){
                let icon = ( data.code == 200 ) ? 1 : 5;
                //layer.msg( data.message , { icon : icon }  );
                showStatus( data.message , ( data.code == 200 ) );
                if( icon == 1 ){
                    //执行压缩
                    compression(recordsId);
                }
            },
            complete:function(){
            }
        });
    }

    //压缩
    var compression = function( recordsId ){
        let url = "{:cmf_plugin_url('Appmarket://CreateSiteTemplate/compression')}";
        $.ajax({
            url:url,
            type:'POST',
            data:{ recordsId : recordsId },
            dataType:'json',
            beforeSend:function(){
            },
            success:function(data){
                let icon = ( data.code == 200 ) ? 1 : 5;
                //layer.msg( data.message , { icon : icon }  );
                showStatus( data.message , ( data.code == 200 ) );
                if( icon == 1 ){
                    setTimeout( function(){
                        //跳转到记录列表
                        layer.msg('预设跳转到记录表');
                        window.location.href = data.data;

                    } , 1200 );
                }
            },
            complete:function(){

            }
        });
    }
    //
    var loadingShow = null;
    var loadshow = function(){
        let loadStr = ['|','/','--',"\\"];
        var count = 0;
        loadingShow = setInterval( function(){
            if( count >= loadStr.length  ){
                count = 0;
            }
            $('#loading-show').text('请稍后...'+loadStr[count]);
            count ++ ;
        },200);
    }
    //显示状态
    var showStatus = function( message , status = true ){
        let  color = status ? 'green':'red' ;
        let p = '<p style="color:'+color+';">'+message+'</p>';
        $('#loading-show').before(p);
        if( !status ){
            clearInterval(loadingShow);
        }
    }
    //清除遮罩层 
    var clearShadow = function(){
        $('.shadow').hide();
        $('.show-status').html('');
    }
</script>
</body>
</html>